import { View, Text, Button } from '@tarojs/components'
import { useMobileInfo } from '../../hooks/useMobileInfo'

export default function SimpleUsage() {
  // 使用 Hook 获取设备信息
  const { device, os, browser, isMobile } = useMobileInfo()

  // 根据设备类型调整样式
  const getButtonStyle = () => {
    return {
      padding: isMobile ? '12px 20px' : '8px 16px',
      fontSize: isMobile ? '16px' : '14px',
      borderRadius: isMobile ? '8px' : '4px'
    }
  }

  // 根据浏览器类型显示不同的功能
  const handleAction = () => {
    if (browser === '微信浏览器') {
      console.log('在微信浏览器中执行特殊逻辑')
    } else if (browser === 'Chrome') {
      console.log('在Chrome浏览器中执行标准逻辑')
    } else {
      console.log('在其他浏览器中执行兼容逻辑')
    }
  }

  return (
    <View style={{ padding: '20px' }}>
      {/* 显示设备信息 */}
      <View style={{ marginBottom: '20px' }}>
        <Text>当前设备：{device}</Text>
        <Text>操作系统：{os}</Text>
        <Text>浏览器：{browser}</Text>
        <Text>是否移动设备：{isMobile ? '是' : '否'}</Text>
      </View>

      {/* 根据设备类型显示不同的按钮 */}
      <Button 
        style={getButtonStyle()}
        onClick={handleAction}
      >
        {isMobile ? '移动端操作' : '桌面端操作'}
      </Button>

      {/* 条件渲染示例 */}
      {isMobile && (
        <View style={{ marginTop: '20px', padding: '10px', backgroundColor: '#f0f0f0' }}>
          <Text>这是移动设备专用内容</Text>
        </View>
      )}

      {!isMobile && (
        <View style={{ marginTop: '20px', padding: '10px', backgroundColor: '#e0e0e0' }}>
          <Text>这是桌面设备专用内容</Text>
        </View>
      )}
    </View>
  )
}
